<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleCancel"
    :width="800"
    centered
    title="统计图表"
  ><echartsView :loading="loading" :options="options"></echartsView
  ></a-modal>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.$nextTick(() => {
          this.fetchData()
        })
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {}
    }
  },
  methods: {
    fetchData () {
      this.loading = true
      setTimeout(() => {
        this.options = {
          title: {
            text: '2018年11月公租房实物分配情况',
            subtext: '全市公租房',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['已分配套数', '未分配套数']
          },
          series: [
            {
              name: '全市公租房分配情况',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 114, name: '已分配套数' },
                { value: 1020, name: '未分配套数' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.loading = false
      }, 1000)
    },
    hanldeAfterClose () {},
    close () {
      this.$emit('update:visible', false)
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>
<style scoped>
</style>
